<template>
  <div>
    <div class="art-dialog">
      <el-dialog
        :title="formData.id === undefined ? '新增文章' : '修改文章'"
        :visible.sync="dialogFormVisible"
        @close="delSubmit"
      >
        <el-form :model="formData" :rules="rules" ref="myForm">
          <el-form-item
            label="文章标题"
            :label-width="formLabelWidth"
            prop="title"
          >
            <el-input
              v-model="formData.title"
              autocomplete="off"
              ref="formAuto"
            ></el-input>
          </el-form-item>
          <el-form-item label="文章内容" :label-width="formLabelWidth">
            <!-- 富文本 -->
            <editor
              :articleBody="formData.articleBody"
              @getArtBody="getArtBody"
              ref="Myeditor"
            ></editor>
          </el-form-item>
          <el-form-item
            class="myItemthere"
            label="视频地址"
            :label-width="formLabelWidth"
          >
            <el-input v-model="formData.videoURL" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="delSubmit">取 消</el-button>
          <el-button type="primary" @click="postArticles">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import editor from "./editor.vue";
import { postArticles, putArticles } from "@/api/articles";
export default {
  components: { editor },
  data() {
    return {
      dialogFormVisible: false,
      // form: {
      //   title: "",
      //   articleBody: "",
      //   videoURL: "",
      // },
      formLabelWidth: "120px",
      formData: {},
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "change",
          },
        ],
      },
    };
  },
  mounted() {
    this.getshowData();
  },
  methods: {
    // 加载弹框时，在父页面调用了这个函数，再赋一个值给子页面。
    getshowData() {
      this.$nextTick(() => {
        // this.$refs.Myeditor.getsmallData();
        this.$refs.Myeditor.content = this.formData.articleBody;
      });
    },
    //   取消时，清空
    delSubmit() {
      this.formData = {};
      this.$refs.Myeditor.content = "";
      console.log(this.formData);
      this.$refs.myForm.clearValidate();
      this.dialogFormVisible = false;
    },
    // 获取富文本里的内容
    getArtBody(val) {
      this.formData.articleBody = val;
      console.log(val);
    },
    // 请求
    async postArticles() {
      try {
        this.$refs.myForm.clearValidate();
        this.$refs.myForm.validate();

        this.$refs.Myeditor.onBlur();
        console.log(this.formData.articleBody == "");
        if (this.formData.articleBody.trim() == "") {
          this.$message.success("内容不能为空");
          return;
        }

        if (this.formData.id) {
          console.log(111);
          await putArticles(this.formData.id, this.formData);
        } else {
          await postArticles(this.formData);
        }
        //
        this.$emit("getArticles");
        this.delSubmit();
      } catch (error) {
        this.$refs.myForm.clearValidate();
      }
    },
  },
};
</script>

<style>
/* .art-dialog .el-icon-close {
  color: #fff;
} */
.art-dialog .el-dialog__body {
  padding-bottom: 0 !important;
}
.art-dialog .myItemthere {
  margin-top: 80px;
}
.art-dialog .quill-editor {
  height: 200px;
}
.art-dialog .el-dialog__header {
  /* color: #fff !important; */
  /* border: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden !important; */
  background-color: #409eff;
}
.art-dialog .el-dialog__title,
.art-dialog .el-icon-close {
  color: #fff;
}
.art-dialog .el-icon-close:hover {
  color: rgb(196, 214, 252);
}
.art-dialog .el-form-item__label {
  width: 90px !important;
}
.art-dialog .el-form-item:nth-child(1) .el-form-item__label:before,
.art-dialog .el-form-item:nth-child(2) .el-form-item__label:before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}

.art-dialog .el-form-item__content {
  margin-left: 90px !important;
}
</style>